<template>
    <div>
        <div v-if="pageIndex === 1" class="title">
            我的佣金
        </div>

        <div v-if="pageIndex === 1" class="conentStype">


            <div class="embody">

                <div>

                    <div style="display: flex;">
                        <div class="imgesStype">
                            <img src="../../../../static/engineering5188/prefecture/moneyIcon.png" />
                        </div>

                        <div class="numright">
                            <p class="tixianText">可提现佣金</p>
                            <p class="tixianNum">{{ dataObj.yue }}</p>
                        </div>
                    </div>

                    <div class="tixianTextTwo">
                        已提现佣金：<span class="spanNum">{{ dataObj.lingqu_yongjin }}</span>
                    </div>

                </div>


                <div>
                    <el-button class="buttonClose" @click="cancel(2)">提现</el-button>
                </div>

            </div>


            <div @click="cancel(4)" class="Records" style="cursor: pointer;">

                <div>
                    <p class="lookJl">提现记录</p>
                    <p class="lookDta">立即查看</p>
                </div>

                <div class="imgesStype">
                    <img src="../../../../static/engineering5188/prefecture/withdraw.png" />
                </div>

            </div>


            <div @click="cancel(3)" class="collection" style="cursor: pointer;">


                <div>
                    <p class="lookJl">收款账户</p>
                    <p class="lookDta" style="color: #2294AC;">立即维护</p>
                </div>

                <div class="imgesStype">
                    <img src="../../../../static/engineering5188/prefecture/account.png" />
                </div>

            </div>



            <div @click="$router.push('/supplierIndex/Supplierteam')" class="team" style="cursor: pointer;">


                <div>
                    <p class="lookJl">我的团队</p>
                    <p class="lookDta" style="color: #DD8052;">立即查看</p>
                </div>

                <div class="imgesStype">
                    <img src="../../../../static/engineering5188/prefecture/teamIcon.png" />
                </div>

            </div>



        </div>

        <div class="rocketDiv" v-if="pageIndex === 1">
            <div class="custom-progress">
                <div class="progress-bar" :style="{ width: progressWidth }"></div>
                <div class="progress-indicator" v-if="showIndicator" :style="{ left: progressWidth }">
                    <img class="rocketImgS" src="../../../../static/engineering5188/prefecture/rocketImg.png"
                        alt="indicator" />
                    <!-- 替换为实际图标路径 -->
                </div>
                <div v-if="totalShow === true" :style="{ left: progressWidth }" class="progress-text">
                    <span class="current-text">{{ currentText }}</span>
                </div>
            </div>
        </div>

        <div class="rocketText" v-if="pageIndex === 1">
            <p class="textOne">邀请缴费累计{{ totalText }}W</p>
            <p class="textTwo">返还会员费6W</p>
        </div>



        <div v-if="pageIndex === 1" class="jinQi">

            近期收益
        </div>



        <ul v-if="pageIndex === 1">
            <li :class="indexNum === 1 ? 'liStypeHover' : 'liStype'" @click="OpenTody">今日</li>
            <li :class="indexNum === 2 ? 'liStypeHover' : 'liStype'" @click="OpenYes">昨日</li>
            <li :class="indexNum === 3 ? 'liStypeHover' : 'liStype'" @click="OpenWeek">近7日</li>
            <li :class="indexNum === 4 ? 'liStypeHover' : 'liStype'" @click="OpenMount">近1个月</li>
            <li :class="indexNum === 5 ? 'liStypeHover' : 'liStype'" @click="OpenthirdMount">近3个月</li>
        </ul>


        <div v-if="pageIndex === 1" class="shouyiData">


            <div class="dataDiv">

                <div class="numberData">{{ numObj.num }}</div>
                <div class="numberText">推荐数量</div>

            </div>



            <div class="dataDivTwo">

                <div class="numberData">{{ numObj.money }}</div>
                <div class="numberText">分销金额</div>

            </div>


        </div>







        <!-- 申请提现 -->

        <ApplicationForWithdrawal v-if="pageIndex === 2" @returnClick="returnClick"></ApplicationForWithdrawal>



        <!-- 收款账户 -->
        <maintenance v-if="pageIndex === 3" @returnClick="returnClick"></maintenance>

        <!-- 提现记录 -->


        <WithdrawalRecord v-if="pageIndex === 4" @returnClick="returnClick"></WithdrawalRecord>

    </div>
</template>

<script>
import WithdrawalRecord from './compayPage/WithdrawalRecord.vue';
import maintenance from './compayPage/maintenance.vue';
import ApplicationForWithdrawal from './compayPage/ApplicationForWithdrawal.vue';
import { mapState } from 'vuex';

export default {
    components: {
        ApplicationForWithdrawal,
        maintenance,
        WithdrawalRecord
    },
    computed: {
        ...mapState([
            "userInfo",
        ]),
    },
    data() {
        return {
            indexNum: 1,
            pageIndex: 1,
            dataObj: {},
            numObj: {
                num: 0,
                money: 0
            },
            totalAll: 200000, // 目标值
            current: 0, // 当前值
            showIndicator: true,
            totalShow: true,
            setObj: {},
            fxSong: 50000,
        }
    },
    computed: {
        ...mapState([
            "userInfo",
        ]),
        progressWidth() {
            let a = (this.current / this.totalAll) * 100;
            console.log(a);

            if (a < 100) {
                this.totalShow = true;
                return (this.current / this.totalAll) * 100 + "%";
            } else {
                this.totalShow = false;
                return 100 + "%";
            }
        },
        currentText() {
            return `邀请缴费累计${this.current / 10000}万`;
        },
        totalText() {
            return `${+(this.totalAll) / 10000}`;
        },
        fixtext() {
            return `${+(this.fxSong) / 10000}`;
        }
    },
    created() {
        this.getData();
        this.getSetting();
        this.getProductList();
    },
    methods: {
        returnClick() {
            this.pageIndex = 1;
        },
        getSetting() {
            this.$httpApi("/api/setting", {}, 'get').then(res => {
                this.totalAll = +(res.data.fxMan);
                this.fxSong = +(res.data.fxSong);
            })
        },
        getProductList() {
            this.$httpApi("/api/myTeam", {
                token: this.userInfo.token,
                page: 1,
                pageSize: 1000,
            }, 'get').then(res => {
                debugger
                this.totalPage = Math.ceil(res.data.count / this.pageSize);
                this.total = res.data.count;
                this.current = res.data.money;
            })
        },
        getData() {
            this.$httpApi("/api/userData", {
                token: this.userInfo.token
            }, 'get').then(res => {
                this.dataObj = res.data;
                this.OpenTody();
            })
        },
        OpenTody() {
            this.indexNum = 1;
            this.numObj = this.dataObj.today
        },
        OpenYes() {
            this.indexNum = 2;
            this.numObj = this.dataObj.yestoday
        },
        OpenWeek() {
            this.indexNum = 3;
            this.numObj = this.dataObj.week
        },
        OpenMount() {
            this.indexNum = 4;
            this.numObj = this.dataObj.month
        },
        OpenthirdMount() {
            this.indexNum = 5;
            this.numObj = this.dataObj['3month']
        },
        cancel(num) {
            this.pageIndex = num
        }
    }

}
</script>

<style lang="less" scoped>
.dataDiv {
    margin-left: 78px;
}

.dataDivTwo {
    margin-left: 169px;
}

.numberText {

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #606060;

    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.numberData {
    font-family: DIN Alternate, DIN Alternate;
    font-weight: bold;
    font-size: 28px;
    color: #333333;

    font-style: normal;
    text-transform: none;
}

.shouyiData {
    width: 1157px;
    height: 126px;
    background: #F8F9FD;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #DCDFE9;
    margin: 17px auto;
    display: flex;
    align-items: center;
    text-align: center;
}

ul {
    display: flex;
    margin-left: 30px;
    margin-top: 24px;
}

.liStype {
    padding: 6px 14px;
    background: #EFF4FD;
    border-radius: 20px 20px 20px 20px;
    margin-right: 16px;

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #5D5D5D;

    font-style: normal;
    text-transform: none;
}


.liStypeHover {
    padding: 6px 14px;
    background: #F8F9FD;
    border-radius: 20px 20px 20px 20px;
    border: 1px solid #0052D9;
    margin-right: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #0052D9;

    font-style: normal;
    text-transform: none;
}


.jinQi {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    padding: 0 30px;
    font-style: normal;
    text-transform: none;
}

.lookJl {

    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 20px;
    color: #333333;

    font-style: normal;
    text-transform: none;
}

.lookDta {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #2445CB;
    font-style: normal;
    text-transform: none;
    margin-top: 20px;
}


.numright {
    margin-left: 20px;
    margin-top: 5px;
}

.spanNum {

    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #333333;

    font-style: normal;
    text-transform: none;

}

.tixianNum {

    font-family: DIN Alternate, DIN Alternate;
    font-weight: bold;
    font-size: 28px;
    color: #333333;

    font-style: normal;
    text-transform: none;
}

.tixianTextTwo {

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #606060;
    margin-top: 11px;
    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.tixianText {

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #606060;

    font-style: normal;
    text-transform: none;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
}

.imgesStype img {
    width: 60px;
    height: 60px;
}

.buttonClose {
    width: 100px;
    background: #FF7A01;
    border-radius: 4px 4px 4px 4px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
    font-style: normal;
    text-transform: none;

}

.team {
    width: 246px;
    height: 136px;
    background: #FFF9F6;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #EFE2DC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 27px;
}

.collection {
    width: 246px;
    height: 136px;
    background: #EEF7F9;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #D1E1E5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 27px;
}

.Records {
    width: 246px;
    height: 136px;
    background: #F8F9FD;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #DCDFE9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 27px;

}

.embody {
    width: 379px;
    height: 136px;
    background: #FEF7EA;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #EEE0C8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 20px;
}

.conentStype {
    display: flex;
    padding: 36px 28px;
    justify-content: space-between;
}

.title {
    height: 56px;
    background: #FFFFFF;
    line-height: 56px;
    border-radius: 0px 0px 0px 0px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    font-style: normal;
    text-transform: none;
    border-bottom: 4px solid #F5F5F5;
    padding-left: 32px;
}


.rocketDiv {
    width: 600px;
    margin: auto;
    margin-top: 30px;
    height: 15px;
    background: #ededed;
    border-radius: 6px 6px 6px 6px;
}

.custom-progress {
    position: relative;
    height: 10px;
    margin: 20px 0;
}

.progress-bar {
    height: 15px;
    background-color: orange;
    transition: width 0.3s ease;
    border-radius: 6px 6px 6px 6px;
}

.progress-indicator {
    position: absolute;
    top: -15px;
    width: 20px;
    height: 20px;
    margin-left: -10px;
}

.current-text {
    margin-left: -36px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    line-height: 32px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.progress-text {
    position: relative;
    margin-top: 10px;
    font-size: 14px;
}

.title {
    height: 56px;
    background: #ffffff;
    line-height: 56px;
    border-radius: 0px 0px 0px 0px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    font-style: normal;
    text-transform: none;
    border-bottom: 4px solid #f5f5f5;
    padding-left: 32px;
}

.textTwo {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 18px;
    color: #000000;

    font-style: normal;
    text-transform: none;
}

.textOne {
    padding-right: 5px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #000000;

    font-style: normal;
    text-transform: none;
}

.rocketText {
    width: 700px;
    margin: auto;
    text-align: right;
    margin-top: 14px;
}
</style>